import 'package:flutter/material.dart';
import 'dart:ui';
import 'package:animations/animations.dart';
import 'package:flutter/cupertino.dart';

// 记得添加依赖 animations: ^1.1.1

void main() => runApp(RootApp());

// 定义根目录Wigdget
class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 根视图
    return MaterialApp(home: AnimationOpenContainerPage());
  }
}

class AnimationOpenContainerPage extends StatefulWidget {
  @override
  _AnimationOpenContainerPageState createState() =>
      _AnimationOpenContainerPageState();
}

class _AnimationOpenContainerPageState
    extends State<AnimationOpenContainerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(title: Text("精品应用")),
      body: Column(children: [
        InkWell(
          onTap: () {
            // Navigator.of(context).push(
            //   MaterialPageRoute(
            //     builder: (BuildContext context) {
            //       return DetailPage();
            //     },
            //   ),
            // );
            Navigator.of(context).push(
              PageRouteBuilder(
                pageBuilder: (BuildContext context, Animation<double> animation,
                    Animation<double> secondaryAnimation) {
                  return DetailPage();
                },
                // 打开显示页面所用时间
                transitionDuration: Duration(milliseconds: 800),
                // 关闭页面所需时间
                reverseTransitionDuration: Duration(milliseconds: 500),
              ),
            );
          },
          child: Container(
            // margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(10),
            color: Colors.white,
            child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Hero(
                    tag: "testImage",
                    child: Image.asset("images/3.0/logo.jpg",
                        width: 77, height: 77, fit: BoxFit.fill),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("每日分享精彩人生",
                            style:
                                TextStyle(color: Colors.black, fontSize: 22)),
                        Text("it's a new day",
                            style: TextStyle(color: Colors.black, fontSize: 18))
                      ],
                    ),
                  ),
                ]),
          ),
        )
      ]),
    );
  }
}

class DetailPage extends StatefulWidget {
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("每日分享")), body: buildCurrentWidget());
  }

  Widget buildCurrentWidget() {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Hero(
              tag: "testImage",
              child: Material(
                  color: Colors.transparent,
                  child: Image.asset("images/3.0/logo.jpg", fit: BoxFit.fill))),
          SizedBox(
            height: 10,
          ),
          Text("每日分享"),
          SizedBox(
            height: 10,
          ),
          Container(
            child: Text(
                "Material Design 设计风格中的容器转换过渡 ，如一个列表点击跳转详情，进行无缝切换，在Flutter 中也就是 Container transform 容器切换，通过OpenContainer来实现。 OpenContainer 在两个子窗口组件之间进行无缝切换，执行起来的效果看起来像是同一个窗口组件切换，分别通过 closedBuilder 和 openBuilder 属性来配置。 本节视频是在 GridView 中结合 OpenContainer 来实践的一个Demo效果。",
                softWrap: true,
                overflow: TextOverflow.ellipsis),
          ),
        ],
      ),
    );
  }
}
